<template>
  <el-card shadow="hover" class="article-card">
    <p><router-link class="article-card-title" :to="{path: '/article', query:{'id': article.id}}">{{article.title}}</router-link></p>
    <p><router-link class="article-card-content" :to="{path: '/article', query:{'id': article.id}}">{{article.text_content}}</router-link></p>
<!--    <h3 class="article-card-title" @click="goPage('/article')">{{title}}</h3>-->
    <p style="margin-top: 10px">
      <i class="el-icon-user-solid"></i>
      <span class="divide" @click="goPage('/user/'+ article.author + '')">{{article.author}}</span>
      <i class="el-icon-stopwatch"></i>
      <span>{{article.publish_time}}</span>
    </p>
  </el-card>
</template>

<script>
export default {
  name: "ArticleCard",
  // props: {
  //   title: String,
  //   author: String,
  //   publish_time: String,
  // },
  props: ['article'],
  methods:{
    goPage(url){
      this.$router.push({path:url})
    },
  }
}
</script>

<style scoped>
  .article-card{
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 20px;
  }
  .article-card-title{
    text-decoration: none;
    cursor: pointer;
    font-size: 24px;
    color: #000000;
    margin-bottom: 10px;
  }
  .article-card-content{
    text-decoration: none;
    color: #a6acb2;
    display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
    -webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
    line-clamp: 3;
    word-break: break-all;
    overflow: hidden;
    max-width: 98%;
  }
  .article-card-title:hover{
    color: #ee3f4d;
  }
  .divide{
    cursor: pointer;
    margin-right: 20px;
  }
  .divide:hover{
    color: #ee3f4d;
  }
</style>
